{$layout}
{$template "/code_editor"}
{$template "menu"}


<div class="ui text menu tiny blue">
    <a :href="'/agents/apps/itemDetail?agentId=' + agentId + '&appId=' + app.id + '&itemId=' + item.id" class="item">{{item.name}} &raquo; 详情</a>
    <span class="item">|</span>
    <a :href="'/agents/apps/itemValues?agentId=' + agentId + '&appId=' + app.id + '&itemId=' + item.id" class="item">数值记录</a>
    <span class="item">|</span>
    <a :href="'/agents/apps/itemCharts?agentId=' + agentId + '&appId=' + app.id + '&itemId=' + item.id" class="item active">图表<span>({{item.charts.length}})</span></a>
</div>
<div class="ui divider margin"></div>

<form class="ui form" data-tea-action="$" data-tea-success="submitSuccess" id="chart-form">
    <input type="hidden" name="agentId" :value="agentId"/>
    <input type="hidden" name="appId" :value="app.id"/>
    <input type="hidden" name="itemId" :value="item.id"/>
    <table class="ui table definition selectable">
        <tr class="title">
            <td class="title">名称</td>
            <td>
                <input type="text" name="name" maxlength="100"/>
                <p class="comment">起一个容易识别的名称，比如CPU使用量</p>
            </td>
        </tr>
        <tr>
            <td>图表类型</td>
            <td>
                <select class="ui dropdown" name="chartType" style="width:10em" v-model="chartType" @change="changeChartType()">
                    <option v-for="chartType in chartTypes" :value="chartType.code">{{chartType.name}}</option>
                </select>
                <p class="comment">{{chartDescription}}</p>
            </td>
        </tr>

        <!-- HTML chart -->
        <tbody v-if="chartType == 'html'">
            <tr>
                <td>HTML</td>
                <td>
                    <textarea name="htmlCode" id="html-code-editor" rows="1"></textarea>
                </td>
            </tr>
        </tbody>

        <!-- URL chart -->
        <tbody v-if="chartType == 'url'">
            <tr>
                <td>URL</td>
                <td>
                    <input type="text" name="urlURL" maxlength="500" placeholder="http://"/>
                    <p class="comment">填入一个有效的URL，前缀通常是<span class="ui label tiny">http://</span>或者<span class="ui label tiny">https://</span> </p>
                </td>
            </tr>
        </tbody>

        <!-- 饼图 -->
        <tbody v-if="chartType == 'pie'">
            <tr>
                <td>数据项</td>
                <td>
					<div class="ui fields inline">
						<div class="ui field">
							<input type="text" name="pieParam" value="${0}" v-model="pieParam.varName"/>
						</div>
						<div class="ui field" v-if="keys.length > 0">
							<select class="ui dropdown" @change="changeValueKey(pieParam)" v-model="pieParam.key">
								<option value="">[参考变量]</option>
								<option v-for="key in keys" :value="key">{{key}}</option>
							</select>
						</div>
					</div>
                    <p class="comment" style="margin-bottom:0.3em">数组中使用<span class="ui label tiny">${N}</span>表示第N行数据，从0行开始，比如：<span class="ui label tiny">${0}</span>, <span class="ui label tiny">${1}</span>；使用<span class="ui label tiny">${NAME}</span>来获取KEY-VALUE形式的数据，比如<span class="ui label tiny">${name}</span>。支持加(+)减(-)乘(*)除(/)取余(%)运算符。</p>

					<!-- 变量 -->
					<div style="line-height:1.8" v-if="selectedSource != null && selectedSource.variables != null && selectedSource.variables.length > 0" class="comment">
						<div class="ui divider" style="margin-bottom:0.4em!important;"></div>
						<span>该数据源提供的数据变量：</span>
						<span v-for="(var1, index) in selectedSource.variables"><var class="ui label tiny" v-text="'${' + var1.code + '}'" style="font-style: normal;"></var> - {{var1.description}} <var style="font-style: normal;" v-if="index < selectedSource.variables.length - 1">；</var><var style="font-style: normal;" v-if="index == selectedSource.variables.length - 1">。</var> </span>
					</div>
                </td>
            </tr>
            <tr>
                <td>数据采样数量</td>
                <td>
                    <select class="ui dropdown" style="width:10em" name="pieLimit" v-model="pieLimit">
                        <option value="100">100</option>
                        <option value="500">1000</option>
                        <option value="1000">1000</option>
                        <option value="2000">2000</option>
                    </select>
                    <p class="comment">从最近的{{pieLimit}}条数据中获取数据项数据</p>
                </td>
            </tr>
        </tbody>

        <!-- 线图 -->
        <tbody v-if="chartType == 'line'">
            <tr v-for="(lineParam, index) in lineParams" :key="index">
                <td>数据项{{index+1}}</td>
                <td>
					<table class="ui table definition">
						<tr>
							<td class="title">变量</td>
							<td>
								<div class="ui fields inline">
									<div class="ui field">
										<input type="text" name="lineParams" v-model="lineParam.varName"/>
									</div>
									<div class="ui field" v-if="keys.length > 0">
										<select class="ui dropdown" @change="changeValueKey(lineParam)" v-model="lineParam.key" style="width:10em">
											<option value="">[参考变量]</option>
											<option v-for="key in keys" :value="key">{{key}}</option>
										</select>
									</div>
									<div class="ui field">
										<a href="" @click.prevent="showMoreParamOptions(lineParam)">更多选项<i class="icon angle" :class="{down:!lineParam.moreVisible,up:lineParam.moreVisible}"></i></a>
									</div>
									<div class="ui field" v-if="index > 0">
										<a href="" title="删除" @click.prevent="removeLine(index)"><i class="icon remove small"></i></a>
									</div>
								</div>
							</td>
						</tr>
						<tr v-show="lineParam.moreVisible">
							<td>是否填充</td>
							<td>
								<select class="ui dropdown" name="lineFills" v-model="lineParam.isFilled" style="width:6em">
									<option value="0">不填充</option>
									<option value="1">填充</option>
								</select>
								<p class="comment"><i class="icon line chart" :class="{area:lineParam.isFilled > 0}"></i> </p>
							</td>
						</tr>
						<tr v-show="lineParam.moreVisible">
							<td>颜色</td>
							<td>
								<select class="ui dropdown" name="lineColors" style="width:6em" v-model="lineParam.color">
									<option value="">[颜色]</option>
									<option v-for="color in colors" :value="color.value">{{color.name}}</option>
								</select>
							</td>
						</tr>
						<tr v-show="lineParam.moreVisible">
							<td>名称</td>
							<td>
								<input type="text" name="lineNames" v-model="lineParam.name"/>
								<p class="comment">将以图例形式出现</p>
							</td>
						</tr>
					</table>

                    <p class="comment" style="margin-bottom:0.3em" v-if="index == 0">数组中使用<span class="ui label tiny">${N}</span>表示第N行数据，从0行开始，比如：<span class="ui label tiny">${0}</span>, <span class="ui label tiny">${1}</span>；使用<span class="ui label tiny">${NAME}</span>来获取KEY-VALUE形式的数据，比如<span class="ui label tiny">${name}</span>。支持加(+)减(-)乘(*)除(/)取余(%)运算符。</p>
					<!-- 变量 -->
					<div style="line-height:1.8" v-if="selectedSource != null && selectedSource.variables != null && selectedSource.variables.length > 0" class="comment">
						<div class="ui divider" style="margin-bottom:0.4em!important;"></div>
						<span>该数据源提供的数据变量：</span>
						<span v-for="(var1, index) in selectedSource.variables"><var class="ui label tiny" v-text="'${' + var1.code + '}'" style="font-style: normal;"></var> - {{var1.description}} <var style="font-style: normal;" v-if="index < selectedSource.variables.length - 1">；</var><var style="font-style: normal;" v-if="index == selectedSource.variables.length - 1">。</var> </span>
					</div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button class="ui button tiny" type="button" @click="addLine()">+添加新数据项</button>
                    <p class="comment">每个数据项代表一条线</p>
                </td>
            </tr>
			<tr>
				<td>最大值</td>
				<td>
					<input type="text" name="lineMax" value="0" maxlength="20" style="width:10em"/>
					<p class="comment">0表示不设置</p>
				</td>
			</tr>
        </tbody>

        <!-- Javascript -->
        <tbody v-if="chartType == 'javascript'">
            <tr>
                <td>Javascript代码</td>
                <td>
                    <textarea name="javascriptCode" id="javascript-code-editor" rows="1"></textarea>

					<!-- 变量 -->
					<div style="line-height:1.8" v-if="selectedSource != null && selectedSource.variables != null && selectedSource.variables.length > 0" class="comment">
						<span>该数据源提供的数据变量：</span>
						<span v-for="(var1, index) in selectedSource.variables"><var class="ui label tiny" v-text="'${' + var1.code + '}'" style="font-style: normal;"></var> - {{var1.description}} <var style="font-style: normal;" v-if="index < selectedSource.variables.length - 1">；</var><var style="font-style: normal;" v-if="index == selectedSource.variables.length - 1">。</var> </span>
					</div>
                </td>
            </tr>
        </tbody>

        <tr>
            <td colspan="2">
                <a href="" v-if="!advancedOptionsVisible" @click.prevent="showAdvancedOptions()" style="font-weight:normal">更多选项 <i class="icon down angle"></i> </a>
                <a href="" v-if="advancedOptionsVisible" @click.prevent="showAdvancedOptions()" style="font-weight:normal">收起选项 <i class="icon up angle"></i> </a>
            </td>
        </tr>
        <tbody v-show="advancedOptionsVisible">
            <tr>
                <td>宽度</td>
                <td>
                    <select class="ui dropdown" name="columns" style="width:10em">
                        <option value="1">1列</option>
                        <option value="2">2列</option>
                    </select>
                </td>
            </tr>
			<tr>
				<td>是否支持时间范围查询</td>
				<td>
					<div class="ui checkbox">
						<input type="checkbox" name="supportsTimeRange" value="1"/>
						<label></label>
					</div>
				</td>
			</tr>
            <tr>
                <td>是否启用</td>
                <td>
                    <div class="ui checkbox">
                        <input type="checkbox" name="on" value="1" checked="checked"/>
                        <label></label>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    <button class="ui button primary" type="submit">保存</button> &nbsp; <a :href="from">返回</a>
</form>

<div style="margin-top:1.5em">
	<div class="ui divider"></div>
	<h3>预览 <a href="" @click.prevent="preview()">刷新</a> </h3>
	<div v-if="charts.length > 0" style="margin-top:1em">
		{$template "/chart_render"}
	</div>
</div>